import React from "react";
import { type FC, type PropsWithChildren } from "react";
import Toggle from "../Toggle";

interface IndexProps {
  active: string | number;
}

const Index: FC<PropsWithChildren<IndexProps>> = (props) => {
  const { children, active } = props;

  return React.Children.map(children, (child: any) => {
    if (child?.type?.displayName === "TabItem") {
      return (
        <Toggle
          removeOnLeave={child.props.removeOnLeave}
          visible={child.key === active}
        >
          {child}
        </Toggle>
      );
    }
    return null;
  });
};
export default Index;
